body {
    behavior: connection-manager;
}

div.content {
    flow: horizontal;
    size: *;
}

div.left-panel {
    size: *;
    padding: 1em;
    border-spacing: 1em;
    overflow-x: scroll-indicator;
    position: relative;
}

div.chaticon svg {
    size: 24px;
    margin: 4px;
    opacity: 0.66;
}

div.chaticon {
    position: absolute;
    right: 0;
    top: 0;
    size: 32px;
    background-color: color(gray-bg);
}

div.chaticon:hover svg {
    opacity: 1;
}

div.chaticon:active {
    background: white;
}

div.right-panel {
    background: white;
    border-left: color(border) 1px solid;
    size: *;
}

div.icon-and-id {
    flow: horizontal;
    border-spacing: 1em;
}

div.icon {
    size: 96px;
    text-align: center;
    font-size: 76px;
    line-height: 96px;
    color: white;
    font-weight: bold;
}

div.id {
    @ELLIPSIS;
    color: color(green-blue);
}

div.permissions {
    flow: horizontal;
    border-spacing: 0.5em;
}

div.permissions > div {
    size: 42px;
    background: color(accent);
}

div.permissions icon {
    margin: *;
    size: 32px;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

div.permissions > div.disabled {
    background: #ddd;
}

div.permissions > div:active {
    opacity: 0.5;
}

icon.keyboard {
    background: url('');
}

icon.clipboard {
    background: url('');
}

icon.audio {
    background: url('');
}

icon.file {
  background:url('data: image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAH+CAESEN8jyZkcIb5N/ONy3vmHhmiGjUm7UwS+YAAAHZSURBVGje7dnbboMwDIBhBwgQoFAO7Ta//4NOqCAXYZQstatq4r+r5ubrgQSpg8iyC4ZURa+PlIpQYGiwrzyeHtYZjAL8T05O4H8BbbKvFgRa4NoBU8pXeYEkDDgaaLQBcwJrmeErJQB/7wes3QBWGnCIX0+AQycL1PO6BMwPa0nA4ZxbgTvOjUYMGPHRnZkQAY4mxPZBjmy53E7ukSkFKYB/D4XsWZQx64sCeYebOogGsoOBYvv6/UCb8F0IOBZ0TlP6lEYdANY350AJqB9/qPVuOI5evw4A1hgLigAlepnyxW80bcCcwN++A2s82Vcu02ta+ceq9BoL5KGTTRwQPlpqA3gCnwWU2kCDgeWRQPj2jAPCDxgCMjhI6uZnToDpvd/BJeFrJQB/fsAa02gCt3mi1wNuy8GgBNDZlysBNNSrADVSjcJl6vCpUn6jOdx0kz0q6PMhQRa4465SFKhx35cgUCBTwj2/NHwZAb71qR8GEP2H1XcmAtBPTEO67GP6FUUAIKGABbDLQ0EArhN2sAIGesRO+iyy+RMAjckVTlMCKFVAbh/4Af9OPgG61SkDVco3BQGT3GXaDAnTIAcYZDuBTwGsAGDxuBFeAQqIqwoFMlAVLrHr/wId5MPt0nilGgAAAABJRU5ErkJggg==');
}

icon.restart {
    background: url('');
}

icon.recording {
    background: url('');
}

icon.block_input {
    background: url('');
}

div.outer_buttons {
    flow:vertical;
    border-spacing:8;
}

div.inner_buttons {
    flow:horizontal;
    border-spacing:8;
}

button.control {
    width: *;
}

button.elevate {
    background:green;
}

button.elevate:active {
    background: rgb(2, 104, 2);
    border-color: color(hover-border);
}

button.elevate>span {
    flow:horizontal;
    width: *;
}

button.elevate>span>span {
    margin-left:*;
    margin-right:*;
}

button.elevate>span>span>span {
    vertical-align: middle;
}

button#disconnect {
    background: color(blood-red);
    border: none;
}

button#disconnect:active {
    opacity: 0.5;
}

@media platform != "OSX" {
header .window-toolbar {
  left: 40px;
  top: 8px;
}
}

@media platform == "OSX" {
header .tabs-wrapper {
    margin-left: 80px;
    margin-top: 8px;
}
}

div.tabs-wrapper {
    size: *;
    position: relative;
    overflow: hidden;
}

div.tabs {
    size: *;
    flow: horizontal;
    white-space: nowrap;
    overflow: hidden;
}

header {
  height: 32px;
  border-bottom: none;
}

div.border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: *;
    height: 1px;
    background: color(border) 1px solid;
}

header div.window-icon {
    size: 32px;
}

div.tabs > div {
    display: inline-block;
    height: 24px;
    line-height: 24px;
}

div.tab {
    width: 70px;
    @ELLIPSIS;
    text-align: center;
    position: relative;
    padding: 0 5px;
    color: black
}

div.active-tab {
    background: color(gray-bg);
    border: color(border) 1px solid;
    border-bottom: none;
    font-weight: bold;
}

span.unreaded {
    position: absolute;
    font-size: 11px;
    size: 15px;
    border-radius: 15px;
    line-height: 15px;
    background: color(blood-red);
    display: inline-block;
    color: white;
}

div.left-panel {
    background: color(gray-bg);
}

button.window#minimize {
    right: 0px!important;
}

div.tab-arrows {
    position: absolute;
    right: 2px;
    font-weight: bold;
    background: white;
}

div.tab-arrows span {
    display: inline-block;
    height: *;
    margin: 0;
    padding: 6px 2px;
    line-height: 20px;
    opacity: 0.66;
}

div.tab-arrows span:hover {
    opacity: 1;
}

div.tab-arrows span:active {
    opacity: 1;
    background-color: #ddd;
}
